<template>
    <div>
        <panle title='公有话术分组' content="公有话术分组列表"></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="sys:role:add" type="primary" label="添加"></pers-button>
                </el-col>
<!--                <el-col :span="12" style="text-align: right;">-->
<!--                    <el-form :inline="true" :model="formInline" class="demo-form-inline">-->

<!--                        <el-form-item label="">-->
<!--                            <el-input v-model="formInline.keyword" size="mini" placeholder="请输入名称"></el-input>-->
<!--                        </el-form-item>-->

<!--                        <el-form-item>-->
<!--                            <el-button type="primary" size="mini" @click="serach">查询</el-button>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                </el-col>-->
            </el-row>
        </div>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                  v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="55"></el-table-column>
            <el-table-column prop="name" label="分组名称"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="id" label="操作" >
                <template slot-scope="scope">
                    <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="sys:role:edit" @click="editGreeting(scope.row)"></PersButton>
                    <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="delGreeitng(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                           :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="open" width="900px" append-to-body :title="!form.id ? '新增话术分组' : '修改话术分组'">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    
                    <el-col :span="14">
                        <el-form-item label="分组名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入分组名称" size="small" />
                        </el-form-item>
                    </el-col>
               

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form') " size="small">确 定</el-button>
            </div>

        </el-dialog>


    </div>
</template>

<script>
import {VueEditor} from "vue2-editor";

import Panle from '@/components/Panle.vue';
import PersButton from '@/components/PersButton.vue';

import { hasPermission,isShow } from '@/common/permission';
import {getStaffUser} from "@/api/scrm/staff/shortcutend";
import {addGroup, delGroup, editGroup, getGroupingList} from "@/api/scrm/staff/grouping";


export default {
    components: {
        Panle,
        PersButton,
        VueEditor
    },
    data() {
        return {
            loading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            tableData: [],
            serachword: '',
            formInline: {},
            open: false,
            form: {
                "name": "",
                "content": "",
                "selectedList": []
            },
            rules: {
                name: [{
                    required: true,
                    message: "分组名称不能为空",
                    trigger: "blur"
                }],
                
            },
            parentDate: [],
          
            checkKey: [],
            multipleSelection: [],
            checkedAll: false,
            checked: true,
            checkList: [],
            selectedList:[],
        }
    },
    created() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        init: function() {
            this.loading = true;
            let param = {
                "pageSize": this.pageSize,
                "pageNumber": this.pageNumber,
                "keyword": this.serachword
            }
            getGroupingList(param).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })

        },
        serach: function() {
            this.serachword = this.formInline.keyword;
            this.init();
        },
        handleSizeChange: function(e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        handleCurrentChange: function(e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        handleSelectionChange: function(e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.role_id)

            }
            this.multipleSelection = selectChang;
            console.log(selectChang);
        },
      
        add: async function() {
            this.form = {
                "name": "",

            };
            this.checkKey = [];
            this.open = true;
        },
        submitForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    addGroup(this.form).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open=false;
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        delGreeitng:function(data) {
            this.$confirm('确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delGroup(data).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess(res.msg);
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
            }).catch(() =>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editGreeting: async function(data){
            
            let editForm ={
                "id":data.id,
                "name":data.name,
            }
            this.form = {...editForm};
            this.open=true;
        },
        subEditForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    editGroup(this.form).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open=false;

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common";

.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}
</style>
